<template>
	<view id="appkc" class="mh100p">

		<!-- 余额  背景渐变-->
		<view class="topBg h300">
			<view class="w90p mauto p30 c000">
				<view class="pt30 pb20 df aic dfsb">
					<view class="f32 fwb">可提现金额</view>
				</view>
				<view class="df dfsb aic">
					<view class="">
						<view class="f72 fwb">￥{{wrap.money ? wrap.money: 0}}</view>
						<view class="f32 c666">冻结金额￥{{wrap.money_cold ? wrap.money_cold : 0}}</view>
					</view>
					<view class="w140 tac lh55 bd1s br10 f28 c333" @click="tixian">提现</view>
				</view>
			</view>
		</view>
		<!-- tab条 -->
		<view class="tabBar df">
			<view class="list" :class="{'active': index == current}" v-for="(item,index) in tab" :key="index" @click="changeCurrent(index)">
				<view class="item">
					<view class="txt">{{item.name}}</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<!-- 新消息 -->
		<view class="txnav w100p bw">
			<view class="txli mlr35 ptb15 df dfsb bdb1sE" v-for="(item,index) in list" :key="index">
				<view class="df dfc">
					<view class="ptb15 fwb">{{item.memo}}</view>
					<view class="c999 f28 ptb10">{{item.createtime}}</view>
				</view>
				<view>
					<view class="cFF9646 pt30 fwb">
						<text v-if="item.type == 1">+</text>
						<text>{{item.money?item.money:'0'}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill"></view>
	</view>
</template>
<script>
	var that;
	export default {
		data() {
			return {
				// 下标
				current: 0,
				// 明细标题
				tab: [{
						name: '收入明细',
					},
					{
						name: '支出明细',
					}
				],
				// 内容
				wrap: {},
				// 列表
				list: [],
			}
		},
		// 获取后
		onLoad(e) {
			that = this;
		},
		// 页面显示
		onShow() {
			// 获取用户信息
			that.getuserinfo();

			// 资金记录
			that.money_log();
		},
		// 方法列表
		methods: {
			//	提现
			tixian(){
				uni.navigateTo({
					url:"tixian?type=1&status=1"
				})
			},
			// 获取用户信息
			getuserinfo() {
				// 获取用户信息
				that.util.getuserinfo((rs) => {
					// 赋值内容
					that.wrap = rs.data.userinfo;
				})
			},
			// 切换下标
			changeCurrent(index) {
				// 如果相等
				if (that.current == index) {
					return;
				}
				// 赋值下标
				that.current = Number(index);
				// 资金记录
				that.money_log();
			},

			// 资金记录
			money_log() {
				that.request({
					url: '/api/index/index',
					// 传值
					data: {
						// 表名
						table: 'user_money_log',
						mine: 1,
						// type:1=收入,2=支出
						type: that.current + 1,
					},
					// 加载
					load: 1,
					success(rs) {
						if (rs.code == 1) {
							// 赋值列表
							that.list = rs.data;
						} else {
							// 弹窗提示
							that.alert(rs.msg);
						}
					}
				})
			},
		},
	}
</script>

<style lang="less">
	// 主颜色
	@color: #FFA451;

	/* tab条 */
	.tabBar {

		// 列表项
		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;

			// 文字
			.txt {
				padding: 30rpx 0;
				color: #999;
				font-size: 32rpx;
				transition: .3s;
			}

			// 线
			.line {
				width: 0;
				height: 10rpx;
				margin: 0 auto;
				background-color: @color;
				border-radius: 100rpx;
				transform: translateY(-100%);
				transition: .3s;
			}
		}

		// 激活
		.active {

			// 字体
			.txt {
				color: @color;
				font-weight: bold;
			}

			// 线
			.line {
				width: 100%;
			}
		}
	}
</style>
